import React, { Component, Fragment } from 'react';
import { Card, Table, Button, Modal, Form, Select, DatePicker } from 'antd';
import Iaxios from './../../axios';
//import Utils from './../../utils/utils';
import './../../mocker/index.js';
import BaseForm from '../../components/BaseForm';

const FormItem = Form.Item;
const Option = Select.Option;

class Order extends Component {
	formRef = React.createRef();
	state = {
		
	}
	params = {
		page: 1
	}
	formList = [
		{
			type: 'SELECT',
			label: '城市',
			field: 'city',
			placeholder: '全部',
			initialValue: '1',
			width: 100,
			list: [
				{id: '0',name: '全部'},
				{id: '1',name: '北京'},
				{id: '2',name: '上海'},
				{id: '3',name: '广州'}
			]
		},
		{
			type: '时间查询',
			field: 'time',
		},
		{
			type: 'SELECT',
			label: '订单状态',
			field: 'order_status',
			placeholder: '全部',
			initialValue: '1',
			width: 100,
			list: [
				{id: '0',name: '全部'},
				{id: '1',name: '进行中'},
				{id: '2',name: '结束行程'}
			]
		}
	]
	componentDidMount(){
		this.requestList()
	}
	//默认请求接口数据
	requestList = () => {
		Iaxios.requestList(this, '/order', this.params,true)
//		Iaxios.ajax({
//			url: '/order',
//			method: 'post',
//			data: {
//				//这里应该放params，但是这次会报错
//				page: this.params.page
//			}
//		}).then((res)=>{
//			console.log(res);
//			this.setState({
//				list: res.result.list.map((item, index) => {
//					item.key = index;
//					return item
//				}),
//				pagination: Utils.pagination(res,(current)=>{
//					this.params.page = current;
//					this.requestList();
//				})
//			})
//		})
	}
	onSelectChange = (selectedRowKeys, selectedRows) => {
	    this.setState({ selectedItem: selectedRows });
	};
	orderDetail = () => {
		let item = this.state.selectedItem;
		console.log(item);
		if(!item){
			Modal.info({
				title: '信息',
				content: '请选择一条订单信息'
			})
			return;
		}
		window.open(`/#/common/order/detail/${item[0].id}`,'_blank');
	}
	handleFilter = (params) => {
		console.log(params)
		this.params = params;
		this.requestList();
	}
	render(){
		const columns = [
			{
				title: '订单编号',
				dataIndex: 'order_sn'
			},
			{
				title: '车辆编号',
				dataIndex: 'bike_sn'
			},
			{
				title: '用户名',
				dataIndex: 'user_name'
			},
			{
				title: '手机号码',
				dataIndex: 'mobile'
			},
			{
				title: '里程',
				dataIndex: 'distance'
			},
			{
				title: '行驶时长',
				dataIndex: 'total_time'
			},
			{
				title: '订单状态',
				dataIndex: 'order_status'
			},
			{
				title: '开始时间',
				dataIndex: 'start_time'
			},
			{
				title: '结束时间',
				dataIndex: 'end_time'
			},
			{
				title: '订单金额',
				dataIndex: 'total_fee'
			},
			{
				title: '实付金额',
				dataIndex: 'user_pay'
			},
		]
		const tailLayout = {
			wrapperCol: {
				offset: 6,
				span: 18,
			},
		};
		const rowSelection = {
			type: 'radio',
			onChange: this.onSelectChange
		}
		return (
			<Fragment>
				<Card>
					<BaseForm formList={this.formList} filterSubmit={this.handleFilter} />
				</Card>
				<Card style={{width: '100%', marginBottom: 20}}>
					<Form
						ref={this.formRef}
						onFinish={this.onFinish}
						layout="inline"
					>
						<FormItem name="name" label="选择城市">
							<Select style={{width: 80}}>
								<Option value="1">北京</Option>
								<Option value="2">上海</Option>
								<Option value="3">深圳</Option>
							</Select>
						</FormItem>
						<FormItem name="op_mode" label="订单时间">
							<DatePicker showTime />
						</FormItem>
						<FormItem name="mode" label="订单状态">
							<Select style={{width: 100}}>
								<Option value="1">全部</Option>
								<Option value="2">进行中</Option>
								<Option value="3">结束行程</Option>
							</Select>
						</FormItem>
						<FormItem {...tailLayout}>
							<Button type="primary" htmlType="submit">好了</Button>
						</FormItem>
					</Form>
				</Card>
				<Card style={{width: '100%'}}>
					<Button type="primary" onClick={this.orderDetail}>订单详情</Button>
					&#x3000;<Button type="primary">结束订单</Button>
				</Card>
				<div className="content-wrap">
					<Table
						columns = { columns }
						dataSource = { this.state.list }
						pagination = { this.state.pagination }
						rowSelection={rowSelection}
					/>
				</div>
			</Fragment>
		)
	}
}

export default Order;